<template>
  <div class="content row-flex-start" style="min-width:1500px;ovorflow-x:auto">
    <div class="left_map" id="left_map"  @click="showChinaMap"></div>
    <div class="right_opetate row-center" id="right_opetate">
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
var mapData = [
  {
    name: '111',
    value: [115.892151, 28.676493]
  }
];

export default {
  mounted () {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  data () {
    return {
      map: {},
      mapData: mapData
    }
  },
  props: {
    chartData:{
      type: Array,
      require: true
    }
  },
  watch:{
    chartData:{
      deep: true,
      handler(val){
        this.mapData = val;
        this.showChinaMap();
      }
    }
  },
  methods: {
    getMapOpt () {
      const option = {
        backgroundColor: '#F8F8F8', //地图背景颜色
        //以下是地图标题，我在此处设空，需要的可以自己加上
        title: {
          text: '',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter:function(params){
            const name = params.data.name;
            const tem = params.data.tem;
            const hum = params.data.hum;
            return `<div>主机：${name}</div>` +
              `<div>温度：${tem}</div>` +
              `<div>湿度：${hum}</div>`;
          }
        },
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: false
            },
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: 'rgba(0,0,0)'
              }
            }
          },
          //支持拖拽缩放
          roam: false,
          //缩放比例
          zoom: 1.2,
          itemStyle: {
            normal: {
              areaColor: '#6FA7CE', //地图颜色
              borderColor: '#fff' //地图边线颜色
            },
            emphasis: {
              areaColor: '#B7DFED' //鼠标移入颜色
            }
          }
        },
        series: [
          {
            // 图表的类型为散点图
            type: 'scatter',
            name: 'warehouse',
            // 采用的坐标系为地理坐标系
            coordinateSystem: 'geo',
            // 散点图上点的大小
            symbolSize: 30,
            // 标记的图形
            symbol: function (value, params) {
              return 'image://' + require('@/assets/logo/logo.png');
              //return 'image://'
            },
            // 区名称的样式
            label: {
              show: true,
              formatter: '{b}',
              position: 'bottom',
              color: '#fff',
              fontSize: 10
            },
            itemStyle: {
              color: '#ddb926'
            },
            data: this.mapData
          }
        ]
      }
      return option
    },
    // 显示中国地图
    showChinaMap () {
      const option = this.getMapOpt()
      this.map.setOption(option, true)
    },
    initMap () {
      var dom = document.getElementById('left_map')
      this.map = echarts.init(dom)
      const option = this.getMapOpt()
      if (option && typeof option === 'object') {
        this.map.setOption(option, true)
      }
    }
  },
  computed: {}
}
</script>

<style>
.left_map {
  width: 1200px;
  height: 800px;
}
.right_opetate {
  flex: 1;
  height: 100%;
  background: #404a59
}
</style>

